<template>
  <div class="daily-sentence_wrapper" v-loading="loading">
    <h3>{{ dailySentenceJson.dateline }}<i>{{ dailySentenceJson.translation }}</i></h3>
    <div class="daily-sentence_tags">
      <el-tag v-for="(item, index) in dailySentenceJson.tags" :key="item" :type="tagsList[index % 5]">{{ item }}</el-tag>
    </div>
    <p>{{ dailySentenceJson.content }}</p>
    <p>{{ dailySentenceJson.note }}</p>
    <p><audio :src="dailySentenceJson.tts" controls /></p>
    <div class="daily-sentence_img">
      <img :src="dailySentenceJson.picture2 || dailySentenceJson.picture4" :alt="dailySentenceJson.translation" />
    </div>
  </div>
</template>

<script>
import request from '../../../utils/request'
import { DEFAULT_DAILY_SENTENCE_JSON } from '../../config'

export default {
  name: 'DailySentence',
  data() {
    return {
      loading: false,
      dailySentenceJson: DEFAULT_DAILY_SENTENCE_JSON,
      tagsList: ['', 'success', 'info', 'warning', 'danger']
    }
  },
  created() {
    this.loading = true
    request({
      url: 'https://open.iciba.com/dsapi',
      method: 'get'
    }).then(res => {
      this.dailySentenceJson = res
    }).finally(() => {
      this.loading = false
    })
  }
}
</script>

<style scoped lang="scss">
.daily-sentence_wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-content: flex-start;
  padding: 15px;
  box-sizing: border-box;
  .daily-sentence_tags {
    display: flex;
    justify-content: flex-start;
    align-content: center;
    span {
      margin-right: 8px;
    }
  }
  p, h3 {
    text-align: left;
    i {
      font-size: 12px;
      font-weight: normal;
      margin-left: 8px;
    }
  }
  .daily-sentence_img {
    width: 100%;
    height: 100%;
    flex: 1;
    overflow: hidden;
    img {
      max-width: 100%;
      max-height: 100%;
    }
  }
}
</style>
